<template>
	<swiper :circular="true" class="landing-bar" :indicator-dots=" true" indicator-color="#2984F8"
		indicator-active-color="#dbdbdb">
		<swiper-item>
			<view class="landing-content">
				<image src="/static/icons/QQ20250714-151419.png" mode=""
					style="width: 600rpx;height: 720rpx;margin-top: 80rpx;"></image>
				<view class="tip-bar">
					<text>在线咨询</text>
					<button :plain="true" style="background-color: transparent;border: none;"></button>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="landing-content">
				<image src="/static/icons/QQ20250714-151536.png" mode=""
					style="width: 600rpx;height: 640rpx;margin-top: 80rpx;"></image>
				<view class="tip-bar">
					<text>健康档案</text>
					<button :plain="true" style="background-color: transparent;border: none;"></button>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="landing-content">
				<image src="/static/icons/QQ20250714-151600.png" mode=""
					style="width: 600rpx;height: 444rpx;margin-top: 80rpx;"></image>
				<view class="tip-bar">
					<text>电子服务包</text>
					<button :plain="true" style="background-color: transparent;border: none;"></button>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="landing-content">
				<image src="/static/icons/QQ20250714-151636.png" mode=""
					style="width: 590rpx;height: 600rpx;margin-top: 100rpx;"></image>
				<view class="tip-bar">
					<text>在线签约</text>
					<button @click="toLogin">立即体验</button>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	// 跳转登录页
	function toLogin() {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style scoped>
	.landing-bar {
		width: 750rpx;
		height: calc(100vh - 180rpx);
	}

	.landing-content {
		height: calc(100vh - 260rpx);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;

	}

	.tip-bar {
		width: 322rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.tip-bar text {
		color: #2984F8;
		font-size: 40rpx;
	}

	.tip-bar button {
		color: #fff;
		background-color: #1877F2;
		font-size: 32rpx;
		border-radius: 16rpx;
		height: 88rpx;
		width: 320rpx;
		text-align: center;
		line-height: 88rpx;
	}
</style>